<template>
  <div class="order">
    <van-nav-bar
      title="order"
      left-text="返回"
      right-text="Mine"
      left-arrow
      @click-left="onClickLeft"
      @click-right="onClickRight"
    />
    <van-list
      v-model="loading"
      :finished="finished"
      finished-text="没有更多了"
      @load="loadData"
    >
      <!-- index+1+''是为了把原来的数字转化为字符串，否则会报错 -->
      <div class="ordersListUl">
        <ul>
          <li v-for="(item, index) in orders" :key="item.id">
            <div class="side">{{ index + 1 }}</div>
            <div class="inner">
              <p>收件人：{{ item.receiver }}</p>
              <p>收件人联系方式：{{ item.regions }}</p>
              <p>订单价格： {{ item.price }}</p>
              <p class="muo">收货地址 {{ item.address }}</p>
              <div class="btn">
                <van-button
                  class="buttons"
                  type="info"
                  @click="orderinfo(item._id)"
                  >查看详情</van-button
                >
                <van-button
                  class="buttons"
                  type="danger"
                  @click="delorder(item.id)"
                  >删除订单</van-button
                >
              </div>
            </div>
          </li>
        </ul>
      </div>
    </van-list>
  </div>
</template>

<script>
import { Toast } from "vant";
import { reqorder } from "@/api/order";

export default {
  data() {
    return {
      orders: [],
      page: 1,
      per: 10,
      pages: 1,
      loading: false,
      finished: false,
    };
  },
  computed: {},
  watch: {},

  methods: {
    async loadData() {
      this.loading = true;
      const res = await reqorder(this.page);
      console.log(res);
      this.orders.push(...res.orders);
      this.pages = res.pages;
      this.page += 1;
      this.loading = false;
      console.log(this.orders);
      if (this.page > this.pages) {
        this.finished = true;
      }
    },
    orderinfo(id) {
      this.$router.push({
        name: "orderdetail",
        params: {
          id,
        },
      });
    },
    delorder(id) {},
    onClickLeft() {
      this.$router.go(-1);
      Toast("返回");
    },
    onClickRight() {
      this.$router.push("Mine");
      Toast("按钮");
    },
  },
  created() {
    this.loadData();
  },
  mounted() {},
  components: {},
};
</script>
<style scoped>
* {
  margin: 0;
  padding: 0;
}
.ordersListUl {
  width: 100%;
}
.ordersListUl ul {
  list-style: none;
}
.ordersListUl ul li {
  margin-top: 10px;
  height: 15vh;
  background-image: linear-gradient(
    180deg,
    rgba(207, 232, 255, 1) 0,
    rgba(207, 232, 255, 1) 0,
    rgba(143, 107, 170, 1) 100%,
    rgba(143, 107, 170, 1) 100%
  );
  position: relative;
}
.ordersListUl ul li p {
  width: 55vw;
  height: 2vh;
  margin-top: 2px;
}
.side {
  width: 20vw;
  height: 100%;

  color: #fff;
  line-height: 15vh;
  font-size: 20px;
  font-weight: bolder;
  text-align: center;
}
.inner {
  width: 80vw;
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: left;
  font-size: 12px;
  position: relative;
  box-sizing: border-box;
  padding-left: 7px;
  flex-direction: column;
}
.side,
.inner {
  float: left;
}
.inner .btn {
  border: none;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  padding: 4px 8px;
  /* color: #000; */
  position: absolute;
  right: 10px;
  bottom: 50%;
  transform: translateY(50%);
}
.inner .btn .buttons {
  border-radius: 5px;
  width: 80px;
  height: 30px;
  color: #000;
  background-color: rgb(75, 122, 211);
  border: none;
}
.inner .btn .buttons:nth-child(2) {
  margin-top: 10px;
  background-color: rgb(166, 64, 194);
}
.muo {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
</style>
